<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介</title>
    <link rel="shortcut icon" href="./images/touxiang.jpg">
    
    <link rel="stylesheet" href="./css/style.css">
    <style>

    </style>
</head>

<body>
    <header>
        <nav style="background-color: black;">
            <div class="hleft" style="height: 0px;">
                <img src="./images/touxiang.jpg" alt="">
            </div>
            <div class="hright">
                <a href="https://gitee.com/tian158/task" target="_blank">点击打开仓库</a>
                <div id="bkon" class="bk">
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                </div>
            </div>
            <div class="hidbox">
                <div class="container">
                    <div class="square" style="--d: 1"></div>
                    <div class="square" style="--d: 2"></div>
                    <div class="square" style="--d: 3"></div>
                    <div class="square" style="--d: 4"></div>
                    <div class="square" style="--d: 5"></div>
                    <div class="square" style="--d: 6"></div>
                    <div class="square" style="--d: 7"></div>
                    <div class="square" style="--d: 8"></div>
                    <div class="square" style="--d: 9"></div>
                </div>
                <span class="hidboxspan" style="height: 0px;">尚未开发完毕</span>
            </div>
        </nav>
    </header>
    <section id="fristsection">
        <div style="height: calc(var(--headheight)*1.5);"></div>
        <div class="bgtext">
            <div class="textline" style="--td:1px"></div>
            <hr>
            <div class="textline" style="--td:2px;"></div>
            <hr>
            <div class="textline" style="--td:1px;"></div>
            <hr>
            <div class="textline" style="--td:2px;"></div>
            <hr>
            <div class="textline" style="--td:1px;"></div>
        </div>
        <div class="centerbox">
            <h1>个人简介网页</h1>
        </div>
    </section>
    <section id="secondsection">
        <div class="bg">
            <ul>
                <li>
                    <p>姓名：李昊天</p>
                </li>
                <li>
                    <p>性别：男</p>
                </li>
                <li>
                    <p>出生：xxxxxx</p>
                </li>
                <li>
                    <p>手机：xxx</p>
                </li>
                <li>
                    <p>微信：xxx</p>
                </li>
                <li>
                    <p>出生地：xxx</p>
                </li>
            </ul>
        </div>
    </section>
    <section id="thirdsection">
        <h1>生活</h1>
        <div class="tflex">
            <div class="tleft">
                <div class="imgbox" style="--it:1">
                    <img src="./images/2.jpg" alt="">
                    <div class="hidebox">渡轮</div>
                </div>
                <div class="imgbox" style="--it:-1.5">
                    <img src="./images/5.jpg" alt="">
                    <div class="hidebox">隐秘的角落</div>
                </div>
            </div>
            <div class="tcenter">
                <div class="imgbox" style="--it:0">
                    <img src="./images/4.jpg" alt="">
                    <div class="hidebox">黄牛</div>
                </div>
                <div class="imgbox" style="--it:-2">
                    <img src="./images/8.jpg" alt="">
                    <div class="hidebox">美食</div>
                </div>
            </div>
            <div class="tright">
                <div class="imgbox" style="--it:-2.5">
                    <img src="./images/6.jpg" alt="">
                    <div class="hidebox">单车</div>
                </div>
                <div class="imgbox" style="--it:0.5">
                    <img src="./images/7.jpg" alt="">
                    <div class="hidebox">广州塔</div>
                </div>
            </div>
        </div>
    </section>
    <section id="fourthsection">
        <div class="fflex">
            <div class="pngbox" style="--del:1s"></div>
            <div class="pngbox" style="--del:2s"></div>
            <div class="pngbox" style="--del:3s"></div>
            <div class="pngbox" style="--del:4s"></div>
            <div class="pngbox" style="--del:5s"></div>
            <div class="pngbox" style="--del:6s"></div>
            <div class="pngbox" style="--del:7s"></div>
            <div class="pngbox" style="--del:8s"></div>
            <div class="pngbox" style="--del:9s"></div>
            <div class="pngbox" style="--del:10s"></div>
            <div class="pngbox" style="--del:11s"></div>
            <div class="pngbox" style="--del:12s"></div>
        </div>
    </section>
</body>
<script>
    // 赶工
    let body = document.querySelector('body');
    let container = document.querySelector('.container');
    let hleft = document.querySelector('.hleft');
    let nav = document.querySelector('nav');
    let hidboxspan = document.querySelector('.hidboxspan');
    function Restart() {
        hidbox.style.height = "0";
        body.style.overflowY = "scroll";
        container.style.display = "none";
        bkon.className = "bk";
        hleft.style = "none";
        nav.style = "none";
        hidboxspan.style.height = "0px";
    }
    function oncilckf() {
        hidboxspan.style = "none";
        hidbox.style = "none";
        hleft.style.height = "0px";
        hidbox.style = "none";
        bkon.className = "bk1";
        body.style.overflow = "hidden";
        nav.style.backgroundColor = "black";

    }
    window.onload = function () {
        bkon.style.display = "none";
        setTimeout(() => {
            bkon.style = "none";
            Restart();
        }, 3000)
    }

    let tl = document.querySelectorAll(".textline");
    let text = ["shunzhi", "sleep", "Games", "Creativity", "Economics", "Badminton", "LOL", "Skateboard", "PS5", "Dragonboat", "Rap", "Jay"];
    let ao = [];
    // 循环
    for (var a = 0; a < tl.length; a++) {
        for (var i = 0; i < 10; i++) {
            let p = document.createElement('p');
            let m = Math.floor(Math.random() * text.length);
            p.innerHTML = text[m];
            tl[a].appendChild(p);
            ao.push(p)
        }
    }

    //监听
    function ListenE(i) {
        let m = Math.floor(Math.random() * text.length);
        ao[i].innerHTML = text[m];
    }
    for (let i = 0; i < ao.length; i++) {
        ao[i].addEventListener('mousemove', function () {
            ListenE(i)
        })
    }
    // console.log(document.querySelectorAll(".hidebox")[0].style.fontStyle)

    let bkon = document.querySelector("#bkon");
    let block = document.querySelectorAll(".block");
    let x = 1;
    let hidbox = document.querySelector('.hidbox');
    bkon.onclick = function () {
        if (x == 1) {
            oncilckf();
            x = 0;
        } else {
            Restart();
            x = 1;
        }
    }
</script>

</html>